<template>
  <div class="wrap">
    <div class="tab-items flex-center-start">
      <div
        class="tab"
        :class="[tabChooesd == '2' ? 'active' : '']"
        @click="changeTab('2')"
      >
        jztxmbsbcl
        <!-- 机载图像目标识别处理 -->
      </div>
      <div
        class="tab"
        :class="[tabChooesd == '3zhu' ? 'active' : '']"
        @click="changeTab('3zhu')"
      >
        cztxmbsbcl
        <!-- 车载图像目标识别处理 -->
      </div>
    </div>
    <uploadImage
      v-if="tabChooesd == '2'"
      :isShowUpload="isShowUpload"
      :flag="0"
    />
    <uploadImage
      v-if="tabChooesd == '3zhu'"
      :isShowUpload="isShowUpload"
      :flag="0"
    />
    <el-dialog width="100%" title="预览" :visible.sync="dialogVisible">
      <div class="preview-wrap">
        <img class="preview" :src="previewImgSRC" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadImage from "@/components/uploadImage";
// import uploadVideo from "@/components/uploadImage_video";
export default {
  components: {
    uploadImage,
    // uploadVideo,
  },
  computed: {
    uploadOtherData() {
      return {
        sessionId: this.sessionId,
        flag: this.flag,
      };
    },
  },
  data() {
    return {
      imgUrlNP: require("@/assets/images/no_photo.png"),
      flag: "2",
      tabChooesd: "2",
      isShowUpload: false,
      sessionId: "",
      distinguishImage: "",
      pretreatmentImage: "",
      processType: "",
      imgUrl: "",
      imgUrlBD: "", // 被动处理模式
      baseURL: `${process.env.VUE_APP_BASE_URL}/activeImg`,
      dialogVisible: false,
      previewImgSRC: "",
    };
  },
  created() {
    var ws = new WebSocket(`${process.env.VUE_APP_SOCKET_IP}/websocket`);
    ws.onopen = function () {
      // ws.send("hello");
    };
    ws.onmessage = (e) => {
      console.log(666, e.data);
      let data = JSON.parse(e.data);
      if (data.event === "sessionId") {
        this.sessionId = data.data.sessionId;
      }
      if (data.event === "2") {
        this.distinguishImage =
          "data:image/png;base64," + data.data.distinguishImage;
        this.pretreatmentImage =
          "data:image/png;base64," + data.data.pretreatmentImage;
        let processType = data.data.processType;
        this.processType =
          processType == 0
            ? "去雾"
            : processType == 1
            ? "图像增亮"
            : processType == 2
            ? "即去雾又图像增亮"
            : processType == 3
            ? "无处理"
            : "";
        console.log(888, this.imgUrl);
      }
    };
    ws.onclose = function () {
      console.log("closed...");
    };
    ws.onerror = function () {
      console.log(this.readyState);
    };
  },
  methods: {
    previewImg(item) {
      this.dialogVisible = true;
      this.previewImgSRC = item.imageUrl;
    },
    onChange(file) {
      console.log("file", URL.createObjectURL(file.raw));
      this.imgUrl = URL.createObjectURL(file.raw);
    },
    submit() {
      this.$refs.upload.submit();
    },
    beforeUpload(file) {
      console.log(333, file);
      const isLt50M = file.size / 1024 / 1024 < 50;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt50M) {
        this.$message.error("上传头像图片大小不能超过 50MB!");
      }
      return isLt50M;
    },
    changeTab(e) {
      this.tabChooesd = e;
      if (e.indexOf("zhu") != -1) {
        this.isShowUpload = true;
      } else {
        this.isShowUpload = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// vh、vw计算函数
@function vh($px) {
  @return ($px/1020) * 100vh;
}
@function vw($px) {
  @return ($px/1920) * 100vw;
}
.wrap {
  padding-left: 30px;
  padding-right: 30px;
}
.tab-items {
  // margin-top: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 216, 245, 0.35);
  line-height: 1;
  .tab {
    cursor: pointer;
    margin-right: 20px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 0;
      height: 2px;
      width: 0px;
      background: #00d8f5;
    }
    &.active {
      color: rgba(0, 216, 245, 01);
      &::after {
        width: 100%;
        transition: width 0.3s;
      }
    }
  }
}
.img-con {
  // max-width: 13rem;
  align-items: flex-start;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  .img-item {
    width: 6rem;
    height: 6rem;
    // width: 2.2rem;
    // height: 2.2rem;
    // background: pink;
    border: 1px solid rgba(0, 216, 245, 0.35);
    .img-bg {
      // width: 100%;
      // height: 100%;
      width: 6rem;
      height: 6rem;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  .img-item3 {
    width: 10rem;
    height: 12.78rem;
  }
  .desc {
    text-align: left;
    margin-bottom: 12px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 216, 245, 0.8);
    line-height: 1;
  }
  .processType {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: rgba(0, 216, 245, 0.8);
  }
}
</style>
<style lang="scss" scoped>
.upload-demo {
  // margin: 10px 0;
  text-align: right;
}
</style>